<template>
	<div class="blog-main wow fadeInDown">
      <div class="heading-blog">{{$route.params.pageTitle}}</div>
        <div id="recommend-list" class="list-group">

        <router-link tag='button' class="list-group-item" v-for="t in titles" :key="t._id" :to="{name:'post',params:{postId:t._id}}">
          	{{t.title}}
          	<span class="label label-primary recommend-label hidden-xs">{{t.updateTime}}</span>
          	<span class="label label-success recommend-label">{{t.categoryName}}</span>
        </router-link>

        </div>
  </div>
</template>

<script>

export default {
  data() {
    return {
      titles: []
    }
  },
  watch: {
    $route() {
      
      // console.log(to)
      // console.log(from)
      // console.log("watch.........................")
      // console.log(this.$route.params)
      this.getRecommendPosts()
    }
  },
	mounted: function() {
    // console.log(`getRecommendPosts.........${this.$route.params.categoryId}`)
    this.getRecommendPosts()
	},
	methods: {
    getRecommendPosts: function() {
      this.$axios.get(`/api/getRecommendPosts/${this.$route.params.categoryId}`)
            .then(res => {
              // console.log(res)
              this.titles = res.data
            })
            .catch(error => {
              console.log(error)
            })
    }
		
	}
}
</script>